<template>
	<view class="page">
		<view class="page_header">
			<navigation defaultButton="back">订单详情</navigation>
		</view>
		<view class="page_panel">
			<view class="page_main">
				<view class="card_info">
					<image class="image" :src="detail.image" mode=""></image>
					<view class="info">
						<view class="info_header">
							<viwe class="title"> 
								<text class="titile_text">{{detail.serviceName}}</text>
								<view class="sign green" v-if="detail.zhengce == $enums['服务政策']['公益']">公益</view>
								<view class="sign orange" v-if="detail.zhengce == $enums['服务政策']['常规']">常规</view>
							</viwe>
						</view>
						<view class="info_container">
							<view class="text">
								{{detail.content}}
							</view>
						</view>
						<veiw class="info_footer">
							<view class="organization">·{{detail.companyName}}</view>
							<view class="pirce" v-if="detail.money && detail.money>0">￥{{detail.money | toFixed(2)}}/次</view>
							<view class="pirce gratis" v-else>免费</view>
						</veiw>
					</view>
				</view>
				<view class="card_input">
					<view class="form-item first_form-item">
						<view class="form-item__name">
							<view class="label">服务地址</view>
							<view class="input"><text>{{detail.address || '--'}}</text></view>
						</view>
						<view class="form-item__value"></view>
					</view>
					<view class="form-item">
						<view class="form-item__name">
							<view class="label">服务时间</view>
						</view>
						<view class="form-item__value">
							<view class="form-item__value-input">{{detail.serviceStartTime | toDate('yyyy-MM-dd hh:mm') || '--'}}</view>
						</view>
					</view>
					<view class="form-item">
						<view class="form-item__name">
							<view class="label">联系电话</view>
						</view>
						<view class="form-item__value" @tap="phoneCall">
							<view class="form-item__value-input">{{detail.phone || '--'}}</view>
						</view>
					</view>
				</view> 
				<view class="card_input">
					<view class="card_title">订单详情</view>
					<view class="form-item">
						<view class="form-item__name">
							<view class="label">订单编号</view>
						</view>
						<view class="form-item__value">
							<view class="form-item__value-input" @tap="copy(detail.orderCode)">{{detail.orderCode || '--'}}
								<view class="copy">复制</view>
							</view>
						</view>
					</view>
					<view class="form-item">
						<view class="form-item__name">
							<view class="label">创建时间</view>
						</view>
						<view class="form-item__value">
							<view class="form-item__value-input">{{detail.gmtCreate | toDate('yyyy-MM-dd hh:mm') || '--'}}</view>
						</view>
					</view>
					<view class="form-item">
						<view class="form-item__name">
							<view class="label">成交时间</view>
						</view>
						<view class="form-item__value">
							<view class="form-item__value-input">{{detail.gmtModified | toDate('yyyy-MM-dd hh:mm') || '--'}}</view>
						</view>
					</view>
				</view>

				<button class="page_btn" hover-class="page_btn-hover" v-if="detail.status == enums['用户订单状态']['已预约']" @tap="cancelOrder(id)">取消订单</button>
				<button class="page_btn" hover-class="page_btn-hover" v-if="detail.status == enums['用户订单状态']['服务中']">已被服务</button>
				<button class="page_btn" hover-class="page_btn-hover" v-if="detail.status == enums['用户订单状态']['待评价']" @tap="goNextStep">已被服务，请前往评论</button>

			</view>
		</view>
	</view>
</template>

<script>
	import * as userServeApi from '@/api/userApi/serve.js';
	import pickers from '@/components/ming-picker/ming-picker.vue';
	import hTimePicker from "@/components/h-timePicker/h-timePicker.vue";
	export default {
		components: {
			pickers,
			hTimePicker
		},
		data() {
			return {
				id: '',
				enums: this.$enums,
				detail: {}
			};
		},
		methods: {
			cancelOrder(id){
				if(id){
					userServeApi
						.cancelOrder({ id: id })
						.then(res => {
							if (res.code === 0) {
								uni.reLaunch({
									url: `/pages/mine/order/order?type=已预约`
								});
							}
						})
						.catch(e => {
							uni.showToast({
								title: e.msg,
								icon: 'none',
								duration: 1000
							});
						});
				}
			},
			getOrderDetail(id){
				userServeApi
					.queryOrderDetails({ id: id })
					.then(res => {
						if (res.code === 0) {
							this.detail = res.data;
						}
					})
					.catch(e => {
						uni.showToast({
							title: e.msg,
							icon: 'none',
							duration: 1000
						});
					});
			},
			goNextStep() {
				uni.navigateTo({
					url: `/pages/mine/order/evaluate/evaluate?id=${this.id}`
				});
			},
			copy(code) {
				let orderCode = String(code) || '';
				uni.showToast({
					title: '复制成功',
					duration: 1000
				});
			},
			phoneCall() {
				uni.makePhoneCall({
					phoneNumber: this.detail.contact
				});
			},
			pickersChangeLabel(event) {
				console.log("area", event.value.join(''));
				console.log("areaArray", event.value);
				if (event && event.value) {
					this.detail.area = event.value.join('');
					this.detail.areaArray = event.value;
				}
			},
			pickersChangeCode(event) {
				// console.log("code", event);
			}
		},
		onLoad(options) {
			if (options && options.id) {
				this.id = options.id;
				this.getOrderDetail(options.id);
			}
		}
	}
</script>

<style lang="stylus">
	.page_btn {
		margin-top 120rpx;
	}

	.page_panel {
		position absolute;
		top: calc(280rpx + var(--status-bar-height));
		right 0rpx;
		bottom 0;
		left 0rpx;
		background-color rgba(243, 243, 243, 1);

		.page_main {
			padding 0rpx 30rpx;
			position relative;
			top: -140rpx;
			right 0rpx;
			left 0rpx;
			bottom 0rpx;
		}

		.card_info {
			display: flex;
			justify-content: space-between;
			padding: 30rpx 32rpx;
			box-sizing: border-box;
			background-color #FFFFFF;
			border-box border-box;
			border-radius: 12rpx;

			.image {
				width: 204rpx;
				height: 204rpx;
				border-radius: 23rpx;
			}

			.info {
				flex: 1;
				margin-left: 20rpx;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.info_header {
					width: 100%;
					display: flex;
					justify-content: space-between;

					.title {
						flex: 1;
						margin-right: 10rpx;
						letter-spacing: 1rpx;
						font-size: 32rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #333333;
						display: flex;
						.titile_text{
							flex: 1;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box; // 将对象作为弹性伸缩盒子模型显示。
							-webkit-box-orient: vertical; // 从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
							-webkit-line-clamp: 1; // 这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。此处为2行
							word-wrap: break-word;
						}

						.sign {
							margin-left: 10rpx;
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #FFFFFF;
							padding: 4rpx;
							border-radius: 8rpx;
							transform: scale(0.7);
						}

						.green {
							background-color: rgba(0, 181, 0, 1);
						}

						.orange {
							background-color: rgba(246, 132, 21, 1);
						}
					}


				}

				.info_container {
					flex: 1;
					margin-top: 15rpx;
					font-size: 24rpx;
					letter-spacing: 1rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #999999;

					.text {
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box; //将对象作为弹性伸缩盒子模型显示。
						-webkit-box-orient: vertical; //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
						-webkit-line-clamp: 2; //这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。此处为2行
						word-wrap: break-word;
					}
				}

				.info_footer {
					margin-top: 10rpx;
					display: flex;
					justify-content: space-between;

					.organization {
						background-color: rgba(37, 143, 255, 0.1);
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #4594FF;
						border-radius: 10rpx;
						padding: 3rpx 8rpx;
					}

					.pirce {
						font-size: 32rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #FF4200;
					}

					.gratis {
						color: rgba(51, 51, 51, 1);
					}
				}
			}
		}

		.card_input {
			margin-top 20rpx;
			border-radius: 12rpx;
			background-color #FFFFFF;
			padding 40rpx 25rpx 40rpx 25rpx;

			.form-item {
				min-height: auto;
				margin-top 50rpx;
				
				.form-item__name {
					.label {
						color rgba(153, 153, 153, 1);
					}
					.input {
						margin-top 10rpx;
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #333333;
					}
				}
				.form-item__value-input {
					color rgba(51, 51, 51, 1);
					display flex;
					align-items center;
					justify-content flex-end;
					.copy {
						margin-left 30rpx;
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #FB7B22;
					}
					
					.icon {
						margin-left 20rpx;
						padding 2rpx 8rpx 5rpx 8rpx;
						border-radius 10rpx;
					
						background-color rgba(211, 230, 255, 0.55);
					
						.nursing-icon {
							font-size 25rpx;
							color rgba(69, 148, 255, 1);
						}
					
					}
				}
			}

			.first_form-item {
				margin-top 0rpx;
			}
		}
	}
</style>
